<template>
  <div id="Export">
    <el-breadcrumb
      separator="/"
      style="padding-left: 10px; padding-bottom: 10px; font-size: 12px"
    >
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>分数导出</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" shadow="hover">
      <el-form
        :inline="true"
        :model="queryMap"
        size="small"
        class="demo-form-inline"
      >
        <el-form-item label="学生姓名">
          <el-input
            v-model="queryMap.username"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="search"
            type="primary"
            icon="el-icon-search"
            :loading="loading"
            round
            >查询</el-button
          >
          <el-button
            @click="delScoreByStuIds"
            type="plain"
            icon="el-icon-delete"
            :loading="loading"
            round
            :disabled="this.selUserId.length === 0"
            >批量删除</el-button
          >
        </el-form-item>
        <el-form-item
          ><download-excel
            :fields="excelTitle"
            :data="stuScoreList"
            worksheet="sheet1"
            name="学生成绩表.xlsx"
            ><el-button type="success" icon="el-icon-download" round
              >数据导出</el-button
            ></download-excel
          ></el-form-item
        >
      </el-form>
      <template>
        <el-table
          :data="stuScoreList"
          border
          stripe
          size="mini"
          style="width: 100%; margin-top: 5px"
          @selection-change="selsChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="num"
            label="学号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="className"
            label="班级"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="username"
            label="学生姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="score"
            label="分数"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                icon="el-icon-delete"
                size="mini"
                :loading="loading"
                @click="delScoreByStuId(scope.row.userId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 10px"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryMap.page"
        :page-sizes="[10, 50, 100]"
        :page-size="this.queryMap.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
import { queryStuTotalScores, delExternalScore } from "api/api";
export default {
  data() {
    return {
      queryMap: { page: 1, size: 10 },
      total: 0,
      loading: false,
      stuScoreList: [],
      selUserId: [],
      excelTitle: {
        学号: "num",
        姓名: "username",
        班级: "className",
        分数: "score",
      },
    };
  },
  methods: {
    //改变页码
    handleSizeChange(newSize) {
      this.queryMap.size = newSize;
      this.getStuTotalScores();
    },
    //翻页
    handleCurrentChange(current) {
      this.queryMap.page = current;
      this.getStuTotalScores();
    },
    //查询所有满足需求的学生与分数
    getStuTotalScores() {
      queryStuTotalScores(this.queryMap).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.stuScoreList = res.data.rows;
          this.total = res.data.total;
        }
      });
    },
    //查询
    search() {
      this.loading = true;
      queryStuTotalScores(this.queryMap)
        .then((res) => {
          if (!res.flag) {
            this.$message.error(res.message);
            this.loading = false;
          } else {
            this.stuScoreList = res.data.rows;
            this.total = res.data.total;
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //批处理
    selsChange(sels) {
      this.selUserId = [];
      sels.forEach((sel) => {
        this.selUserId.push(sel.userId);
      });
    },
    //根据学生ID删除总分表中的数据
    async delScoreByStuIds() {
      var res = await this.$confirm(
        "此操作将删除该学生信息，是否继续？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {
        this.$message({
          type: "info",
          message: "已取消操作！",
        });
      });
      if (res == "confirm") {
        this.loading = true;
        await delExternalScore(this.selUserId).then((res) => {
          if (!res.flag) {
            this.$message.error(res.message);
            this.loading = false;
          } else {
            this.$message({
              type: "success",
              message: "删除成功！",
            });
            this.loading = false;
            //重新加载
            this.getStuTotalScores();
          }
        });
      }
    },
    //根据学生ID删除总分表中的数据
    async delScoreByStuId(stuId) {
      var res = await this.$confirm(
        "此操作将删除该学生信息，是否继续？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {
        this.$message({
          type: "info",
          message: "已取消操作！",
        });
      });
      if (res == "confirm") {
        this.loading = true;
        await delExternalScore(stuId).then((res) => {
          if (!res.flag) {
            this.$message.error(res.message);
            this.loading = false;
          } else {
            this.$message({
              type: "success",
              message: "删除成功！",
            });
            this.loading = false;
            //重新加载
            this.getStuTotalScores();
          }
        });
      }
    },
  },
  mounted() {
    this.getStuTotalScores();
  },
};
</script>